<template>
  <div class="box" @mousemove="mouseMove">
    <h2>当前的X轴坐标----{{ clientX }}</h2>
    <h2>当前的Y轴坐标----{{ clientY }}</h2>
    <button @click="getBeauty">获取美女图片</button>
    <img width="500" :src="imgUrl" alt="" />
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'App',
});
</script>

<script setup lang="ts">
import getMouseMove from './hooks/useMouseMove';
import GetBeautys from './hooks/useGetBeauty';

const { clientX, clientY, mouseMove } = getMouseMove();
const { getBeauty, imgUrl } = GetBeautys();
</script>

<style>
.box {
  width: 1880px;
  height: 900px;
  border: 1px solid red;
}
</style>
